<template>
	<button :class="outerClass" :disabled="disabledFormat" @tap="doTap">{{info}}</button>
</template>

<script>
	export default {
		name: 'acardButton',
		computed: {
			disabledFormat() {
				if (this.disabled) {
					return true
				}
				return null
			}
		},
		props: {
			/**
			 * @description  按钮上显示的文字
			 */
			info: {
				type: String,
				default: ''
			},
			/**
			 * @description  按钮是否禁用的状态  默认false不禁用  true表示禁用
			 */
			disabled: {
				type: Boolean,
				default: false
			},
			/**
			 * @description 引用该组件的父组件传入的样式
			 */
			outerClass: {
				type: String,
				default: ''
			}
		},
		methods: {
			doTap() {
				this.$emit("tapButton");
			}
		}
	}
</script>

<style lang="less" scoped>
	button {
		padding: 0;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 16rpx;
		color: #ffffff;
		font-weight: 500;
		font-size: 36rpx;
		background-color: #627EFF;

		&::after {
			border: none;
		}

		&[disabled] {
			background: #E0E0E0 !important;
			color: #ffffff;
		}
	}

	.button-hover {
		background: #5871E5;
	}
</style>
